=calc-grid-columns($class, $i: 1)
  @for $i from 1 through $grid-columns
    .grid__unit--#{$class}-#{$i}
      width: percentage($i / $grid-columns)

    .grid__push--#{$class}-#{$i}
      left: percentage($i / $grid-columns)
      right: auto

    .grid__pull--#{$class}-#{$i}
      right: percentage($i / $grid-columns)
      left: auto

    .grid__offset--#{$class}-#{$i}
      margin-left: percentage($i / $grid-columns)

    .blocks--#{$class}-#{$i} .blocks__element
      width: calc(#{percentage(1 / ($grid-columns / ($grid-columns / $i)))} - #{$grid-gutter-width / 2})

// config
$grid-columns: $global-grid-columns
$grid-gutter-width: $global-gutter
$grid-max-width: $global-page-width

html, body
  font-size: 100%
  height: 100%

html
  overflow-y: auto
  box-sizing: border-box

*, *:before, *:after
  box-sizing: inherit

.grid__column,
.grid__columns
  box-sizing: border-box
  display: inline-block
  font-size: 1rem
  margin: 0
  text-align: left
  vertical-align: top
  width: 100%
  position: relative
  padding: 0 ($grid-gutter-width/2)

.grid__column--centered
  display: block
  margin: 0 auto

.grid__row--middle
  .grid__column,
  .grid__columns
    vertical-align: middle

.grid__row--bottom
  .grid__column,
  .grid__columns
    vertical-align: bottom

.grid__row
  +clearfix

  display: block
  font-size: 0
  margin: 0 auto
  box-sizing: border-box
  padding: 0
  text-align: left
  max-width: $grid-max-width

  .grid__row
    margin: 0 ($grid-gutter-width/-2)


  &.grid__row--collapse

    & > .grid__column
      padding-left: 0
      padding-right: 0

.grid__row--full
  max-width: 100%

.grid__row--centered
  text-align: center

.grid__push--small-reset
  left: auto !important
  right: auto !important

.blocks
  margin: 0 $grid-gutter-width / -4

  .blocks__element
    position: relative
    float: left
    box-sizing: border-box
    transition: background .2s ease
    margin: $grid-gutter-width/4


+calc-grid-columns(sm)

@media #{$medium-up}

  html, body
    overflow-x: initial

  .grid__push--md-reset
    left: auto
    right: auto

  +calc-grid-columns(md)

@media #{$large-up}

  .grid__push--lg-reset
    left: auto
    right: auto

  +calc-grid-columns(lg)
